<template>
	<view class="box-bg">
		<uni-nav-bar shadow color="#F7F7F7" left-icon="left" backgroundColor="#3485FD" height="65px" title="优惠券" @clickLeft="back" />
	</view>
	<view class="main1"></view>
	<view class="main2">
		<uni-card class="main2-card">
			<view class="img-view">
				<image class="img" src="/static/tuoyuan.png" mode=""></image>
				<view class="number">
					<view class="num-view">
						<view class="num-text">仅限于XX加油站使用</view>
						<view class="num-yuan">满200元可用</view>
					</view>
					<view class="num-money"><text class="￥" >￥</text><text class="money">20</text></view>
				</view>
				<view class="time">
					<view class="time-view">
						有效期至：2020.04.11--2023.05.11
					</view>
					<navigator class="use" url="#">去使用 ></navigator>
				</view>
			</view>
			<view class="img-view">
				<image class="img" src="/static/tuoyuan.png" mode=""></image>
				<view class="number">
					<view class="num-view">
						<view class="num-text">仅限于XX加油站使用</view>
						<view class="num-yuan">满200元可用</view>
					</view>
					<view class="num-money"><text class="￥" >￥</text><text class="money">50</text></view>
				</view>
				<view class="time">
					<view class="time-view">
						有效期至：2020.04.11--2023.05.11
					</view>
					<navigator class="use" url="#">去使用 ></navigator>
				</view>
			</view>
			<view class="img-view">
				<image class="img" src="/static/tuoyuan.png" mode=""></image>
				<view class="number">
					<view class="num-view">
						<view class="num-text">通用</view>
						<view class="num-yuan">满200元可用</view>
					</view>
					<view class="num-money"><text class="￥" >￥</text><text class="money">20</text></view>
				</view>
				<view class="time">
					<view class="time-view">
						有效期至：2020.04.11--2023.05.11
					</view>
					<navigator class="use" url="#">去使用 ></navigator>
				</view>
			</view>
			<view class="img-view">
				<image class="img" src="/static/tuoyuan.png" mode=""></image>
				<view class="number">
					<view class="num-view">
						<view class="num-text">仅限于XX加油站使用</view>
						<view class="num-yuan">满200元可用</view>
					</view>
					<view class="num-money"><text class="￥" >￥</text><text class="money">100</text></view>
				</view>
				<view class="time">
					<view class="time-view">
						有效期至：2020.04.11--2023.05.11
					</view>
					<navigator class="use" url="#">去使用 ></navigator>
				</view>
			</view>
	    </uni-card>
	</view>
</template>

<script>
</script>

<style>
	.box-bg{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1000;
	}
	.main1{
		background-color: #1168EA;
		padding: 25rpx;
		padding-bottom: 140rpx;
		margin-top: 115rpx;
		height: 150rpx;
	}
	.main2{
		position: relative;
		top: -300rpx;
	}
	.img{
		z-index: 10;
		width: 100%;
		height: 240rpx;
	}
	.img-view{
		margin: 20rpx 0 20rpx 0;
		height:240rpx
	}
	.number,.time{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 100;
		margin: 0 20rpx 0 20rpx;
		padding: 0 15rpx 0 15rpx;
		color: white;
	}
	.number{
		top:-220rpx;
		border-bottom:1rpx solid white;
		padding-bottom: 46rpx;
	}
	.time{
		top: -198rpx;
	}
	.num-text{
		font-size: 25rpx;
		margin-bottom: 10rpx;
	}
	.num-yuan{
		font-size: 40rpx;
		font-weight: 600;
	}
	.money{
		font-size: 110rpx;
		position: relative;
		top:20rpx;
		font-weight: 600;
	}
	.￥{
		font-size: 40rpx;
		position: relative;
		top:20rpx
	}
</style>